<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script>
           $(function(){
               $.ajax({
                 // 请求方式
                 type: "GET",
                 // 请求的路径
                 url: "AccountServlet",
                 // 超时
                 timeout:2000,
                 // 期望得到的数据类型 json text
                 dataType:"json",
                 // 数据
                 //  默认异步
                 async:true,
                 data: {flag:"selectAllJson"},
                 // 响应成功执行该函数
                 success: function(arr,status,xhr){
                   $.each(arr, function(i,ele) {
                     // 创建行和列  然后追加到表格
                     var tr = $("<tr/>");
                     $("<td/>").html('<input type="checkbox" name="" id="ckid" value=""  />').appendTo(tr);
                     $("<td/>").html(ele.accountName).appendTo(tr);
                     $("<td/>").html(ele.accountRealName).appendTo(tr);
                     $("<td/>").html(ele.accountPhone).appendTo(tr);
                     $("<td/>").html(ele.accountBirthday).appendTo(tr);
                     $("<td/>").html(ele.role.roleName).appendTo(tr);
                     $("<td/>").html("<a href=''>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='deleteData(this)'>删除</a>").appendTo(tr);
                     $("table").append(tr);
                   });
                 },
                 // 响应错误执行该函数
                 error:function(){
                   alert("查询超时,请再次重试");
                 }
               });
           });
  </script>
</head>
<body >
<table border="1px" width="1000px" >
  <tr>
    <th><input type="checkbox"></th>
    <th>账户名</th>
    <th>真实名字</th>
    <th>手机号码</th>
    <th>生日</th>
    <th>角色</th>
    <th>操作</th>
  </tr>
</table>
</body>

</html>